<template>
  <d2-container>
    <el-row :gutter="10">
      <el-col :span="10">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>菜单配置</span>
            <el-button slot="header" size="mini" icon="el-icon-plus" type="primary" style="margin-bottom: 5px;float: right;" @click="() => handleMenuAdd(1)" v-hasBtn="'menubutton_add'">新增</el-button>
          </div>
          <div class="custom-tree-container">
            <div class="block">
              <el-tree :data="data" node-key="id" accordion :expand-on-click-node="false" v-loading="this.menuForm.loading">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span class="custom-tree-node-data">
                    <i v-if="data.menuIcon" :class="`fa fa-${data.menuIcon}`"></i>
                    {{ data.menuName }} 
                    <el-tag v-if="data.mark==1" type="success">启用</el-tag>
                    <el-tag v-else type="danger">禁用</el-tag>
                  </span>
                  <span>
                    <el-button type="button" size="mini" class="opera-button" icon="el-icon-plus" v-hasBtn="'menu_add'" @click="() => handleMenuAdd(data)">添加</el-button>
                    <el-button type="button" size="mini" class="opera-button" icon="el-icon-setting" v-hasBtn="'menu_button'" v-if="node.childNodes.length === 0" @click="() => handleMenuButton(data)">按钮</el-button>
                    <el-button type="button" size="mini" class="opera-button" icon="el-icon-setting" v-hasBtn="'menu_column'" v-if="node.childNodes.length === 0 " @click="() => handleMenuColumn(data)">列</el-button>
                    <el-button type="button" size="mini" class="opera-button" icon="el-icon-edit" v-hasBtn="'menu_edit'" @click="() => handleMenuEdit(data)"  >编辑</el-button>
                    <el-button type="button" size="mini" class="opera-button" icon="el-icon-delete" v-hasBtn="'menu_del'" @click="() => handleMenuDel(data)"  >删除</el-button>
                  </span>
                </span>
              </el-tree>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="14">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{settingTitle}}</span>
            <el-button style="float: right;" size="mini" icon="el-icon-plus" type="primary" @click="handleSettingAdd" v-hasBtn="'menuSetting_add'">新增</el-button>
          </div>
          <div>
            <el-table :data="settingList.data" border class="table" ref="multipleTable" v-loading="this.settingForm.loading">
              <el-table-column prop="enCode" label="标识" v-if="hasCol('menuSetting_enCode')">
              </el-table-column>
              <el-table-column prop="fullName" label="名称" v-if="hasCol('menuSetting_fullName')">
              </el-table-column>
              <el-table-column prop="sort" label="排序" v-if="hasCol('menuSetting_sort')">
              </el-table-column>
              <el-table-column prop="mark" label="状态" v-if="hasCol('menuSetting_mark')">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.mark==1" type="success">启用</el-tag>
                  <el-tag v-else type="danger">禁用</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180" align="center" v-if="hasCol('menuSetting_edit')">
                <template slot-scope="scope">
                  <el-button type="text" icon="el-icon-edit" @click="handleSettingEdit(scope.row)" v-hasBtn="'menuSetting_edit'">编辑</el-button>
                  <el-button type="text" icon="el-icon-delete" class="red" @click="handleSettingDel(scope.row)" v-hasBtn="'menuSetting_del'">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination" style="margin-top:10px">
              <el-pagination background @size-change="handlePageSize" @current-change="handlePageIndex" :current-page="query.pageIndex" :page-sizes="[10, 20, 30, 50, 150, 200]" layout="total, sizes, prev, pager, next, jumper" :page-size="query.pageSize" :total="settingList.total">
              </el-pagination>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 菜单编辑弹出框 -->
    <Drawer placement="left" :title="menuForm.title" v-model="menuForm.show" width="40%" :mask-closable="false" :styles="styles">
      <el-form ref="menuForm" :model="menuForm.model" :rules="menuForm.rules" label-width="50px">
        <el-form-item label="名称" prop="menuName">
          <el-input v-model="menuForm.model.menuName"></el-input>
        </el-form-item>
        <el-form-item label="路由" prop="menuUrl">
          <el-input v-model="menuForm.model.menuUrl"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="menuForm.model.menuIcon"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="menuForm.model.sort"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="menuForm.model.mark">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="iview-drawer-footer">
        <Button style="margin-right: 8px" @click="menuForm.show = false">取 消</Button>
        <Button type="primary" @click="menuEditSave" :loading="menuForm.loading">确 定</Button>
      </div>
    </Drawer>  
    <!-- 按钮编辑弹出框 -->
    <Drawer :title="settingForm.title" v-model="settingForm.show" width="40%" :mask-closable="false" :styles="styles">
      <el-form ref="settingForm" :model="settingForm.model" :rules="settingForm.rules" label-width="50px">
        <el-form-item label="标识" prop="enCode">
          <el-input v-model="settingForm.model.enCode"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="fullName">
          <el-input v-model="settingForm.model.fullName"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="settingForm.model.sort"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="settingForm.model.mark">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="iview-drawer-footer">
        <Button style="margin-right: 8px" @click="settingForm.show = false">取 消</Button>
        <Button type="primary" @click="settingEditSave" :loading="settingForm.loading">确 定</Button>
      </div>
    </Drawer>  
  </d2-container>
</template>
<script>
  import { getAllMenu,menuEdit,menuDel,pageMenuButton,buttonEdit,buttonDel,pageMenuColumn,columnEdit,columnDel } from '@/api/system/menu'
  import { haveCol } from '@/utils/colPermissions'; // 列权限
  let id = 1000;
  export default {
    data() {
      return {
        data: [],
        query: {
          menuId:null,
          pageIndex: 1,
          pageSize: 10
        },
        styles: {
          height: 'calc(100% - 55px)',
          overflow: 'auto',
          paddingBottom: '53px',
          position: 'static'
        },
        settingTitle:"按钮配置",
        settingType:"button",
        settingList: {
          loading: false,
          total: 0,
          data: []
        },
        menuForm:{
          loading: false,
          show: false,
          title: "新增菜单",
          model: {
            id: null,
            menuName: "",
            menuUrl: "",
            menuIcon: "",
            menuUp: "",
            sort: 0,
            mark: 1
          },
          rules:{
            menuName: [
              { required: true, message: '请输入名称', trigger: 'blur' }
            ],
            menuUrl: [
              { required: true, message: '请输入路由', trigger: 'blur' }
            ],
          }
        },
        settingForm:{
          loading:false,
          show: false,
          title:"新增",
          model:{
            menuId:null,
            enCode:"",
            fullName:"",
            sort:0,
            mark:1
          },
          rules:{
            enCode: [
              { required: true, message: '请输入标识', trigger: 'blur' }
            ],
            fullName: [
              { required: true, message: '请输入名称', trigger: 'blur' }
            ],
          }
        },
      }
    },
    created() {
      this.getData();
    },
    methods: {
      getData(){
        getAllMenu().then(res => {
          this.data = res.data
        })
      },
      handleMenuAdd(data){
        let menuUp = null
        if(data === 1){
          this.menuForm.title = "新增一级菜单"
        }else{
          this.menuForm.title = data.menuName + "--新增子菜单"
          menuUp = data.id
        }
        this.menuForm.model = {
            menuName: "",
            menuUrl: "",
            menuIcon: "",
            menuUp: menuUp,
            sort: 0,
            mark: 1
        }
        this.menuForm.show = true
      },
      handleMenuEdit(row){
        this.menuForm.model = Object.assign({}, row);
        this.menuForm.title = "编辑一级菜单"
        this.menuForm.show = true
      },
      menuEditSave(){
        this.$refs["menuForm"].validate((valid) => {
          if(valid){
            this.menuForm.model.children = []
            this.menuForm.loading = true;
            menuEdit(this.menuForm.model).then(res => {
              if(res.status === 200){
                this.menuForm.show = false
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                this.getData()
              }
              this.menuForm.loading = false;
            })
          }else{
            this.$message({ message: "输入错误", type: 'error' })
            return false;
          }
        })
      },
      handleMenuDel(data){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          menuDel({id:data.id}).then(res => {
            if(res.status === 200){
              this.menuForm.show = false
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.getData()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      pageMenuButton(){
        this.settingForm.loading = true;
        pageMenuButton(this.query).then(res => {
          this.settingList.data = res.data.items;
          this.settingList.total = res.data.totalCount;
          this.settingForm.loading = false;
        })
      },
      pageMenuColumn(){
        this.settingForm.loading = true;
        pageMenuColumn(this.query).then(res => {
          this.settingList.data = res.data.items;
          this.settingList.total = res.data.totalCount;
          this.settingForm.loading = false;
        })
      },
      handleMenuButton(data){
        this.query.menuId = data.id
        this.settingTitle = data.menuName + "--按钮配置"
        this.settingType = "button"
        this.query.pageIndex = 1
        this.query.pageSize = 10
        this.pageMenuButton()
      },
      handleMenuColumn(data){
        this.query.menuId = data.id
        this.settingTitle = data.menuName + "--列配置"
        this.settingType = "column"
        this.query.pageIndex = 1
        this.query.pageSize = 10
        this.pageMenuColumn()
      },
      handleSettingAdd(){
        if(this.query.menuId == null){
            this.$message({
              message: '请选择菜单',
              type: 'error'
            })
            return
        }
        this.settingForm.title = this.settingTitle + "-" + "新增" + (this.settingType === "button" ? "按钮": "列")
        this.settingForm.model = {
            menuId : this.query.menuId,
            enCode:"",
            fullName:"",
            sort:0,
            mark:1
        }
        this.settingForm.show = true
      },
      handleSettingEdit(row){
        this.settingForm.title = this.settingTitle + "-" + "编辑" + (this.settingType === "button" ? "按钮": "列")
        this.settingForm.model = Object.assign({}, row);
        this.settingForm.show = true
      },
      settingEditSave(){
        this.$refs["settingForm"].validate((valid) => {
          if(valid){
            if(this.settingType === "button"){
              buttonEdit(this.settingForm.model).then(res => {
                if(res.status === 200){
                  this.settingForm.show = false
                  this.$message({
                    message: '操作成功',
                    type: 'success'
                  })
                  this.pageMenuButton()
                }
              })
            }else{
              columnEdit(this.settingForm.model).then(res => {
                if(res.status === 200){
                  this.settingForm.show = false
                  this.$message({
                    message: '操作成功',
                    type: 'success'
                  })
                  this.pageMenuColumn()
                }
              })
            }
          }else{
            this.$message({ message: "输入错误", type: 'error' })
            return false;
          }
        })
      },
      handleSettingDel(row){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(this.settingType === "button"){
            buttonDel({id:row.id}).then(res => {
              if(res.status === 200){
                this.settingForm.show = false
                this.$message({
                  message: '删除成功',
                  type: 'success'
                })
                this.pageMenuButton()
              }
            })
          }
          else{
            columnDel({id:row.id}).then(res => {
              if(res.status === 200){
                this.settingForm.show = false
                this.$message({
                  message: '删除成功',
                  type: 'success'
                })
                this.pageMenuColumn()
              }
            })
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      handlePageSize(pageSize) {
        this.query.pageSize = pageSize
        this.pageMenuButton()
      },
      handlePageIndex(pageIndex) {
        this.query.pageIndex = pageIndex
        this.pageMenuButton()
      },
      hasCol(e){
        return haveCol(e)
      }
    }
  };
</script>

<style>
.el-tree-node__content {
  height: auto;
  margin-top: 5px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.custom-tree-node-data {
  /* border: 1px solid #ddd; */
  border-radius: 5px;
  padding: 5px;
}
.opera-button {
  padding: 7px;
}
.red {
  color: #ff0000;
}
.iview-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>